 page{
     position: relative;
 }
.cat_box{
    width: 100%;
    height: 100%;
    .cat_tit{
        padding: 0 24rpx 0 22rpx;
        box-sizing: border-box;
        width: 100%;
        height: 100rpx;
        display: flex;
        font-family: 'PingFang SC';
        font-style: normal;
        justify-content: space-between;
        line-height: 100rpx;
        .cat_name{
            font-size: 26rpx;
            image{
                width: 25rpx;
                height: 25rpx;
                vertical-align:middle;
                margin-top: -8rpx;
            }
        }
        .cat_index{
            font-size: 26rpx;
            font-weight: 700;
            color: #9A9A9A;
            image{
                width: 24rpx;
                height: 24rpx;
                vertical-align:middle;
                margin-top: -8rpx;
            }
        }
    }
    .cat_container{
        width: 100%;
        height: ~'calc(100vh - 190rpx)';
        display: flex;
        justify-content: space-between;
        .cat_scroll_left::-webkit-scrollbar{
            // background-color: #37C5E6;
            width:5px;
            height:2px;
          }
        .cat_scroll_left{
            font-size: 26rpx;
            flex: 1.5;
            background: #F8F8F8;
            height: 100%;
            .nav_left{
                font-family: 'PingFang SC';
                font-style: normal;
                font-weight: 400;
                width: 100%;
                .nav_left_items{
                    width: 100%;
                    height: 90rpx;
                    line-height: 90rpx;
                    text-align: center;
                    color:#292929;
                    overflow: hidden;
                    white-space:normal;
	                text-overflow: ellipsis;
                }
                .nav_left_items.cat_active{
                    background-color: #FF4444;
                    color: #FFFFFF;
                }
            }
            
        }
        .cat_scroll_right{
            font-family: 'PingFang SC';
            font-style: normal;
            flex: 5.5;
            .nav_right{
                padding:0 22rpx;
                box-sizing: border-box;
                .catmany{
                    width: 100%;
                    font-weight: 700;
                    font-size: 26rpx;
                    color: #9A9A9A;
                    text-align: center;
                    padding-bottom: 50rpx;
                }
                .catnone{
                    font-weight: 700;
                    font-size: 26rpx;
                    padding-top: 156rpx;
                    box-sizing: border-box;
                    color: #9A9A9A;
                    text-align: center;
                }
                .nav_tit{
                    height: 60rpx;
                    width: 100%;
                    line-height: 60rpx;
                    font-size: 28rpx;
                    color: #9A9A9A;
                }
                .nav_right_items{
                    width: 100%;
                    height: 202rpx;
                    margin: 20rpx 0;
                    display: flex;
                    background-color: #ffff;
                    justify-content: space-between;
                    box-shadow: 0px 1px 10px 1px #CCCDCE;
                    border-radius: 18rpx;
                    .nav_img{
                        width: 200rpx;
                        height: 200rpx;
                        overflow: hidden;
                        border-radius: 18rpx;
                        image{
                            width: 200rpx;
                            height: 200rpx;
                        }
                    }
                    .nav_item{
                        width: 330rpx;
                        height: 200rpx;
                        position: relative;
                        padding-top: 10rpx;
                        box-sizing: border-box;
                        .nav_item_tit{
                            font-weight: 400;
                            font-size: 26rpx;
                            line-height: 36rpx;
                            color: #292929;
                        }
                        .nav_item_pay{
                            position: absolute;
                            width: 147rpx;
                            height: 46rpx;
                            left: 0;
                            bottom: 29rpx;
                            font-weight: 700;
                            font-size: 28rpx;
                            line-height: 46rpx;
                            color: #FF4444;
                        }
                        .nav_item_tab{
                            position: absolute;
                            width: 101rpx;
                            height: 44rpx;
                            text-align: center;
                            line-height: 44rpx;
                            right: 26rpx;
                            bottom: 29rpx;
                            background: #FF4444;
                            border-radius: 20rpx;
                            font-weight: 700;
                            font-size: 28rpx;
                            color: #FFFFFF;

                        }
                    }
                }

            }
        }
    }
}
.cat_shop_box{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%;
    height: ~'calc(100vh - (90rpx + constant(safe-area-inset-bottom)))';
    height: ~'calc(100vh - (90rpx + env(safe-area-inset-bottom)))';
    background-color:rgba(154,154,154, 0.45);
    .hide{
        width: 100%;
        height: 1000rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .cat_shop{
        width: 100%;
        height: 950rpx;
        padding: 21rpx 24rpx 0 24rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 12;
        .cat_back{
            width: 52rpx;
            height: 52rpx;
            position: absolute;
            right: 26rpx;
            top: 18rpx;
        }
        .shop_tit{
            width: 100%;
            height: 210rpx;
            display: flex;
            justify-content: space-between;

            .shop_img{
                width: 210rpx;
                height: 210rpx;
                border-radius: 18rpx;
                overflow: hidden;
                image{
                    width: 210rpx;
                    height: 210rpx;
                }
            }
            .shop_rt{
                flex: 2;
                font-family: 'PingFang SC';
                font-style: normal;
                padding: 50rpx 0 0 17rpx;
                box-sizing: border-box;
                font-size: 26rpx;
                line-height: 36rpx;
                color: #9A9A9A;
                .shop_pay{
                    height: 39rpx;
                    font-weight: 900;
                    font-size: 28rpx;
                    line-height: 39rpx;
                    color: #FF4444;
                    margin-bottom: 22rpx;
                }
                .shop_over{
                    font-weight: 700;
                    margin-bottom: 22rpx;
                }
                .shop_taste{
                    font-weight: 400;
                }
            }
        }
        .taste_box{
            width: 100%;
            margin-top: 25rpx;
            padding: 0 11rpx;
            box-sizing: border-box;
            font-family: 'PingFang SC';
            font-style: normal;
            .taste_tit{
                font-weight: 400;
                font-size: 26rpx;
                color: #404040;
                height: 40rpx;
                line-height: 40rpx;
                width: 100%;
                padding:0 10rpx;
                box-sizing: border-box;
                margin-bottom: 20rpx;
            }
            .taste_items{
                height: 400rpx;
                width: 100%;
                overflow-y: scroll;
                .taste_item{
                    color: #292929;
                    height: 70rpx;
                    background-color: #E1E3E5;
                    border-radius: 10rpx;
                    padding: 8rpx 16rpx;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 22rpx;
                    .taste_img{
                        width: 54rpx;
                        height: 54rpx;
                        border-radius: 10rpx;
                        overflow: hidden;
                        image{
                            width: 54rpx;
                            height: 54rpx;
                        }
                    }
                    .taste_name{
                        padding-left: 24rpx;
                        box-sizing: border-box;
                        flex: 4;
                        font-size: 26rpx;
                    }
                }
                .taste_active.taste_item{
                    background: rgba(255, 68, 68, 0.11);
                    color: #FF4444 !important;
                }
            }
            .taste_number{
                width: 100%;
                height: 60rpx;
                line-height: 60rpx;
                display: flex;
                justify-content: space-between;
                font-family: 'PingFang SC';
                font-style: normal;
                margin-top: 15rpx;
                .taste_shop_number{
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #404040;
                }
                .taste_add_box{
                     flex: 5;
                     display:flex;
                     justify-content:flex-end;
                     align-items: center;
                    .taste_reduce{
                        width: 60rpx;
                        height: 60rpx;
                        display:flex;
                        justify-content:center;
                        align-items: center;
                        background: rgba(225, 227, 229, 0.67);
                        border-radius: 2rpx;
                        color: #C4C4C4;
                        font-size: 28rpx;
                        margin: 0 3rpx;
                    }
                    .taste_num{
                        font-size: 22rpx;
                        color: #292929;
                        width: 80rpx;
                    }
                }
            }
        }
        .btns{
            position: absolute;
            bottom: 5rpx;
            left: 0;
            width: 100%;
            height: 80rpx;
            display: flex;
            padding: 0 35rpx;
            box-sizing: border-box;
            .btn_car{
                width: 50%;
                background: #555555;
                border-radius: 40rpx 0 0 40rpx;
            }
            .btn_pay{
                width: 50%;
                background: #FF4444;
                border-radius:0 40rpx 40rpx 0;
            }
            .btn{
                line-height: 80rpx;
                text-align: center;
                color: #fff;
                font-family: 'PingFang SC';
                font-style: normal;
                font-weight: 700;
                font-size: 26rpx;
            }
        }
    }

}
